<template>
  <a-tabs v-model:activeKey="activeKey">
    <a-tab-pane key="1">
      <template #tab>
        <span>
          <whats-app-outlined />
          电话
        </span>
      </template>
      <div class="text-left">
        <div>联通(微信同号)：16623609820</div>
        <div>感谢您的联系与交流。</div>
        <br />
        <a-image :width="200" :src="loveImg" />
      </div>
    </a-tab-pane>
    <a-tab-pane key="2">
      <template #tab>
        <span>
          <mail-outlined />
          邮箱
        </span>
      </template>
      <div class="text-left">
        <div>QQ：1839833172@qq.com</div>
        <div>再次感谢您的联系与交流。</div>
        <br />
        <a-image :width="200" :src="loveBubble" />
      </div>
    </a-tab-pane>
    <a-tab-pane key="3">
      <template #tab>
        <span>
          <user-outlined />
          个人简介
        </span>
      </template>
      <a-row class="card-space">
        <a-col :span="24">
          <!-- 个人基本信息-->
          <a-card>
            <BaseInfo />
          </a-card>
        </a-col>
      </a-row>
      <br />
      <a-row>
        <a-col class="card-space" :span="11">
          <a-card>
            <!-- 教育背景 -->
            <EduBackground />
          </a-card>
        </a-col>
        <a-col :span="1"></a-col>
        <a-col class="card-space" :span="11">
          <!-- 自我评价 -->
          <a-card>
            <self-evaluation />
          </a-card>
        </a-col>
      </a-row>
    </a-tab-pane>
    <a-tab-pane key="4">
      <template #tab>
        <span>
          <api-outlined />
          座右铭
        </span>
      </template>
      <div class="text-left">
        <h3 :style="{ margin: '16px 0' }"></h3>
        <a-list size="small" bordered :data-source="mottoList">
          <template #renderItem="{ item }">
            <a-list-item>{{ item }}</a-list-item>
          </template>
        </a-list>
      </div>
    </a-tab-pane>
  </a-tabs>
</template>

<script setup>
import {
  WhatsAppOutlined,
  MailOutlined,
  UserOutlined,
  ApiOutlined,
} from "@ant-design/icons-vue";
import { ref } from "vue";
import loveImg from "@/assets/love.gif";
import loveBubble from "@/assets/loveBubble.gif";
import SelfEvaluation from "@/views/personinfo/SelfEvaluation";
import BaseInfo from "@/views/personinfo/PersonBaseInfo";
import EduBackground from "@/views/personinfo/EduBackground";

const activeKey = ref("1");
const mottoList = ref([
  "❥生活就像骑自行车。要保持平衡，就得不停地前进。",
  "❀青春只有一次，别让自己过得不精彩。",
  "当你还在休息的时候，不要忘记别人还在奔跑。",
  "天行健，君子当自强不息。",
  "......",
]);
</script>

<style scoped>
.card-space {
  width: 700px;
  height: 370px;
}
</style>
